<template>
  <div id="percentCharts" :style="barChartsSize"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    // percentNum: {
    //   tyep: String,
    //   required: true
    // },
    width: {
      type: String,
      default: '105'
    },
    height: {
      type: String,
      default: '105'
    }
  },
  data() {
    return {
      chart: null,
      percentNum: '0'
      // option: {
      //   title: {
      //     text: '',
      //     textStyle: {
      //       fontSize: '14',
      //       x: 'left'
      //     }
      //   },
      //   color: ['#56abe8', '#dee3e9'],
      //   series: [
      //     {
      //       name: '完成率',
      //       type: 'pie',
      //       radius: ['60%', '87%'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: true,
      //             position: 'center',
      //             formatter: this.correctRate + '%',
      //             textStyle: {
      //               color: '#3D414B',
      //               fontSize: '30',
      //               fontFamily: '微软雅黑',
      //               fontWeight: 'bold'
      //             }
      //           },
      //           labelLine: {
      //             show: false
      //           }
      //         }
      //       },
      //       data: [
      //         {
      //           name: 'a',
      //           value: '2',
      //           label: {
      //             normal: {
      //               show: true
      //             }
      //           },
      //           itemStyle: {
      //             normal: {
      //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //                 { offset: 0, color: '#F7B500' },
      //                 { offset: 0.5, color: '#FA6400' },
      //                 { offset: 1, color: '#E02020' }
      //               ])
      //             }
      //           }
      //         },
      //         {
      //           name: 'b',
      //           value: '5',
      //           itemStyle: {
      //             normal: {
      //               color: '#BFBFBF'
      //             }
      //           }
      //         }
      //       ]
      //     }
      //   ]
      // }
      // option: {
      //   color: ['#56abe8', '#dee3e9'],
      //   series: [
      //     {
      //       name: '完成率',
      //       type: 'pie',
      //       radius: ['65%', '87%'],
      //       avoidLabelOverlap: false,
      //       label: {
      //         show: false,
      //         position: 'center',
      //         formatter: '{percentNum|{c}%}' + '{text|\n超限率}',
      //         rich: {
      //           percentNum: {
      //             color: '#3D414B',
      //             fontSize: '16',
      //             fontWeight: 700
      //           },
      //           text: {
      //             fontSize: 12,
      //             color: '#BFBFBF',
      //             padding: [3, 0, 0, 0]
      //           }
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         {
      //           name: 'b',
      //           value: '100',
      //           itemStyle: {
      //             color: '#f2f2f2'
      //           }
      //         },
      //         {
      //           name: 'a',
      //           value: this.percentNum,
      //           label: {
      //             show: true
      //           },
      //           itemStyle: {
      //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //               { offset: 0, color: '#F7B500' },
      //               { offset: 0.5, color: '#FA6400' },
      //               { offset: 1, color: '#E02020' }
      //             ])
      //           }
      //         }
      //       ]
      //     }
      //   ]
      // }
    }
  },
  watch: {
    percentNum(newValue, oldValue) {
      if (this.chart) {
        if (newValue) {
          this.$nextTick(() => {
            console.log('bb')
            this.initChart()
          })
        } else {
          this.$nextTick(() => {
            console.log('bb')
            this.initChart()
          })
        }
      } else {
        this.$nextTick(() => {
          console.log('bb')
          this.initChart()
        })
      }
    }
  },
  mounted() {
    this.$bus.$on('updateCsPercentCharts', (data) => {
      this.percentNum = data
      console.log(this.percentNum)
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {
    barChartsSize() {
      return `width: ${this.width}px; height: ${this.height}px`
    }
  },
  methods: {
    initChart() {
      const option = {
        color: ['#56abe8', '#dee3e9'],
        series: [
          {
            name: '完成率',
            type: 'pie',
            radius: ['65%', '87%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{percentNum|{c}%}' + '{text|\n超限率}',
              rich: {
                percentNum: {
                  color: '#3D414B',
                  fontSize: '16',
                  fontWeight: 700
                },
                text: {
                  fontSize: 12,
                  color: '#BFBFBF',
                  padding: [3, 0, 0, 0]
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                name: 'b',
                value: '100',
                itemStyle: {
                  color: '#f2f2f2'
                }
              },
              {
                name: 'a',
                value: this.percentNum,
                label: {
                  show: true
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#F7B500' },
                    { offset: 0.5, color: '#FA6400' },
                    { offset: 1, color: '#E02020' }
                  ])
                }
              }
            ]
          }
        ]
      }
      console.log('bac')

      this.chart = echarts.init(document.querySelector('#percentCharts'))
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped></style>
